@charset "utf-8";
body{
	background:#F6F6F6 url(img/loginbg.png) repeat;
}

*{
	padding:0px;
	margin:0px auto;
	font-family:"微软雅黑";
}

.login-top{
	background:#014A7F;
	color:#fff;
	text-align:center;
	height:50px;
	line-height:50px;
	margin:0px auto;
	padding:0px;
	font-size:30px;
	letter-spacing:0.6em;
}

.login-footer{
	background:#014A7F;
	color:#fff;
	text-align:center;
	height:50px;
	line-height:50px;
	margin:0px auto;
	padding:0px;
	font-size:20px;
	letter-spacing:0.6em;
}

.panel-body{
	border-left:1px solid #014A7F;
	border-right:1px solid #014A7F;
}

.mybtn{
	padding:10px 16px 10px 30px;
	letter-spacing:1em;
	font-size:16px;
}

.mybtn:nth-child(2){
	margin-left:30px;
}

.user-register{
	padding:10px 130px;
	letter-spacing:1em;
	font-size:16px;
}

.errorinfo{
	color:red;
}

.promptinfo{
	color:green;
}

.errorinfo:hover{
	color:red;
}

.container{
	-webkit-transform:translateY(-1000px);
	-ms-transform:translateY(-1000px);
	-moz-transform:translateY(-1000px);
	-o-transform:translateY(-1000px);
	transform:translateY(-1000px);
	
	-webkit-animation:startshow 1s ease-out forwards;
	-ms-animation:startshow 1s ease-out forwards;
	-moz-animation:startshow 1s ease-out forwards;
	-o-animation:startshow 1s ease-out forwards;
	animation:startshow 1s ease-out forwards;
}

.register{
	padding:0px;
	margin:0px auto;
	position:absolute;
	top:5%;
	left:25%;
}

.register-page{
	width:100%;
	height:100%;
	text-align:center;
	position:absolute;
	right:0px;
	left:0px;
	top:0px;
	bottom:0px;
	opacity:0;
	z-index:10;
	padding:10px;
	background:#AEEABE;
	
	-webkit-transform-origin:100%,0%; /*属性允许您改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴*/
	-ms-transform-origin:100%,0%;
	-o-transform-origin:100%,0%;
	transform-origin:100%,0%;
	-webkit-transform:rotateY(-90deg) translateZ(5em); /*rotateY*/
	-ms-transform:rotateY(-90deg) translateZ(5em);
	-o-transform:rotateY(-90deg) translateZ(5em);
	transform:rotateY(-90deg) translateZ(5em);
}

.close-button{
	font-size:1.5em;
	width:2em;
	height:2em;
	position:absolute;
	top:0.5em;
	right:0.5em;
	cursor:pointer;
	text-align:center;
	line-height:2em;
	background:#98CECF;
	color:#FFF;
}

.close-button:hover{
	background:#84C4C6;
	color:#B6B44E;
}

@-webkit-keyframes startshow{
	0% {-webkit-transform:translateY(-1000px);opacity:0;}
	50%{-webkit-transform:translateY(0px);opacity:0.5;}	
	80%{-webkit-transform:translateY(100px);opacity:0.8;}
	100% {-webkit-transform:translateY(0);opacity:1;}
}
@-ms-keyframes startshow{
	0% {-ms-transform:translateY(-1000px);opacity:0;}
	50%{-ms-transform:translateY(0px);opacity:0.5;}	
	80%{-ms-transform:translateY(100px);opacity:0.8;}
	100% {-ms-transform:translateY(0);opacity:1;}
}
@-moz-keyframes startshow{
	0% {-moz-transform:translateY(-1000px);opacity:0;}
	50%{-moz-transform:translateY(0px);opacity:0.5;}	
	80%{-moz-transform:translateY(100px);opacity:0.8;}
	100% {-moz-transform:translateY(0);opacity:1;}
}
@-o-keyframes startshow{
	0% {-o-transform:translateY(-1000px);opacity:0;}
	50%{-o-transform:translateY(0px);opacity:0.5;}	
	80%{-o-transform:translateY(100px);opacity:0.8;}
	100% {-o-transform:translateY(0);opacity:1;}
}
@keyframes startshow{
	0% {
		-moz-transform:translateY(-1000px);opacity:0;
		-ms-transform:translateY(-1000px);opacity:0;
		-o-transform:translateY(-1000px);opacity:0;
		-webkit-transform:translateY(-1000px);opacity:0;
		transform:translateY(-1000px);opacity:0;
	}
	50%{
		-moz-transform:translateY(0px);opacity:0.5;
		-ms-transform:translateY(0px);opacity:0.5;
		-o-transform:translateY(0px);opacity:0.5;
		-webkit-transform:translateY(0px);opacity:0.5;
		transform:translateY(0px);opacity:0.5;
	}	
	80%{
		-moz-transform:translateY(100px);opacity:0.8;
		-webkit-transform:translateY(100px);opacity:0.8;
		-ms-transform:translateY(100px);opacity:0.8;
		-o-transform:translateY(100px);opacity:0.8;
		transform:translateY(100px);opacity:0.8;
	}
	100%{
		-moz-transform:translateY(0);opacity:1;
		-webkit-transform:translateY(0);opacity:1;
		-ms-transform:translateY(0);opacity:1;
		-o-transform:translateY(0);opacity:1;
		transform:translateY(0);opacity:1;
	}
}


/*从左滑动页面*/
.slidePageInFromLeft{
	 /*cubic-bezier:贝塞尔曲线cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0,*/
	-webkit-animation:slidePageInFromLeft 0.8s cubic-bezier(0.01,1,0.22,0.99) 1 0.25s normal forwards;
	-o-animation:slidePageInFromLeft 0.8s cubic-bezier(0.01,1,0.22,0.99) 1 0.25s normal forwards;
	animation:slidePageInFromLeft 0.8s cubic-bezier(0.01,1,0.22,0.99) 1 0.25s normal forwards;
}

@keyframes slidePageInFromLeft{
	0%{
		-webkit-transform:rotateY(-90deg) translateZ(5em);
		-ms-transform:rotateY(-90deg) translateZ(5em);
		-o-transform:rotateY(-90deg) translateZ(5em);
		-moz-transform:rotateY(-90deg) translateZ(5em);
		transform:rotateY(-90deg) translateZ(5em);
		opacity:0;
	}
	
	50%{
		opacity:0.5;
	}	
	
	100%{
		-webkit-transform:rotateY(0deg) translateZ(0);
		-ms-transform:rotateY(0deg) translateZ(0);
		-o-transform:rotateY(0deg) translateZ(0);
		-moz-transform:rotateY(0deg) translateZ(5em);
		transform:rotateY(0deg) translateZ(0);
		opacity:0.98;
		left:0;
	}
}

@-webkit-keyframes slidePageInFromLeft{
	0%{
		-webkit-transform:rotateY(-90deg) translateZ(5em);
		transform:rotateY(-90deg) translateZ(5em);
		opacity:0;
	}
	
	50%{
		opacity:0.5;
	}	
	
	100%{
		-webkit-transform:rotateY(0deg) translateZ(0);
		transform:rotateY(0deg) translateZ(0);
		opacity:0.98;
		left:0;
	}
}

@-o-keyframes slidePageInFromLeft{
	0%{
		-o-transform:rotateY(-90deg) translateZ(5em);
		transform:rotateY(-90deg) translateZ(5em);
		opacity:0;
	}
	
	50%{
		opacity:0.5;
	}	
	
	100%{
		-o-transform:rotateY(0deg) translateZ(0);
		transform:rotateY(0deg) translateZ(0);
		opacity:0.98;
		left:0;
	}
}

@-ms-keyframes slidePageInFromLeft{
	0%{
		-ms-transform:rotateY(-90deg) translateZ(5em);
		transform:rotateY(-90deg) translateZ(5em);
		opacity:0;
	}
	
	50%{
		opacity:0.5;
	}	
	
	100%{
		-ms-transform:rotateY(0deg) translateZ(0);
		transform:rotateY(0deg) translateZ(0);
		opacity:0.98;
		left:0;
	}
}

@-moz-keyframes slidePageInFromLeft{
	0%{
		-moz-transform:rotateY(-90deg) translateZ(5em);
		transform:rotateY(-90deg) translateZ(5em);
		opacity:0;
	}
	
	50%{
		opacity:0.5;
	}	
	
	100%{
		-moz-transform:rotateY(0deg) translateZ(0);
		transform:rotateY(0deg) translateZ(0);
		opacity:0.98;
		left:0;
	}
}

.slidePageBackLeft{
	opacity:1;
	left:0;
	-webkit-animation:slidePageBackLeft 0.8s ease-out 1 normal forwards;
	-o-animation:slidePageBackLeft 0.8s ease-out 1 normal forwards;
	animation:slidePageBackLeft 0.8s ease-out 1 normal forwards;
}

@keyframes slidePageBackLeft{
	0%{
		-webkit-transform:scale(0.95);
		-ms-transform:scale(0.95);
		-moz-transform:scale(0.95);
		-o-transform:scale(0.95);
		transform:scale(0.95);
		opacity:1;
		left:0;
	}
	
	10%{
		-webkit-transform:scale(0.9);
		-ms-transform:scale(0.9);
		-moz-transform:scale(0.9);
		-o-transform:scale(0.9);
		transform:scale(0.9);
	}
	
	70%{
		opacity:1;
	}
	
	100%{
		opacity:0;
		left:-150%;
	}
}

@-webkit-keyframes slidePageBackLeft{
	0%{
		-webkit-transform:scale(0.95);
		transform:scale(0.95);
		opacity:1;
		left:0;
	}
	
	10%{
		-webkit-transform:scale(0.9);
		transform:scale(0.9);
	}
	
	70%{
		opacity:1;
	}
	
	100%{
		opacity:0;
		left:-150%;
	}
}

@-o-keyframes slidePageBackLeft{
	0%{
		-o-transform:scale(0.95);
		transform:scale(0.95);
		opacity:1;
		left:0;
	}
	
	10%{
		-o-transform:scale(0.9);
		transform:scale(0.9);
	}
	
	70%{
		opacity:1;
	}
	
	100%{
		opacity:0;
		left:-150%;
	}
}

@-ms-keyframes slidePageBackLeft{
	0%{
		-ms-transform:scale(0.95);
		transform:scale(0.95);
		opacity:1;
		left:0;
	}
	
	10%{
		-ms-transform:scale(0.9);
		-o-transform:scale(0.9);
		transform:scale(0.9);
	}
	
	70%{
		opacity:1;
	}
	
	100%{
		opacity:0;
		left:-150%;
	}
}

@-moz-keyframes slidePageBackLeft{
	0%{
		-moz-transform:scale(0.95);
		transform:scale(0.95);
		opacity:1;
		left:0;
	}
	
	10%{
		-moz-transform:scale(0.9);
		transform:scale(0.9);
	}
	
	70%{
		opacity:1;
	}
	
	100%{
		opacity:0;
		left:-150%;
	}
}